<template>
  <view class="container">
    <view class="bgColor"></view>
    <uv-navbar class="nav-bar" title="开店通" :bgColor="bgColor" :title-style="{'color':'#fff'}" placeholder>
      <template v-slot:left>
        <view class="uv-nav-slot">
          <image class="touxiang" src="../../static/images/touxiang.png" mode=""></image>
          <view class="linner">
            <view class="linner-title">
              商家名称
            </view>
            <view class="changeShop">
              切换店铺
            </view>
          </view>
        </view>
      </template>
    </uv-navbar>
    <view class="main" style="position: relative;z-index: 1;padding: 0 30rpx;box-sizing: border-box;">
      <!-- setting -->
      <view class="setting">
        <view class="setting-item" v-for="(item, index) in settingList" :key="index" @click="toPage(item)">
          <image class="setting-item-icon" :src="item.url" mode=""></image>
          <view class="setting-item-label">
            {{item.label}}
          </view>
        </view>
      </view>
      <!-- 余额 -->
      <view class="blance">
        <view class="blance-item" @click="toReport">
          <view class="tp">
            <view class="tp-fl">
              今日交易额(元)
            </view>
            <image class="tp-icon" src="../../static/images/arrow.png" mode=""></image>
          </view>
          <view class="amount">
            1203.89
          </view>
          <view class="count-label">
            收款笔数
          </view>
          <view class="count-value">
            15
          </view>
        </view>
        <view class="blance-item">
          <view class="tp">
            <view class="tp-fl">
              实时账单
            </view>
            <image class="tp-icon" src="../../static/images/arrow.png" mode=""></image>
          </view>
          <view class="linener">
            <image class="linener_apliay_icon" src="../../static/images/apliay.png" mode=""></image>
            <view class="linener_amount">￥723.89</view>
          </view>
          <view class="linener">
            <image class="linener_apliay_icon" src="../../static/images/wechat_login.png" mode=""></image>
            <view class="linener_amount">￥500</view>
          </view>
        </view>
      </view>
      <!-- 常用功能 -->
      <view class="block">
        <view class="block-title">
          常用功能
        </view>
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in changyongList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
      <!-- 店铺管理 -->
      <view class="block">
        <view class="block-title">
          店铺管理
        </view>
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in dianpuList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
      <!-- 会员管理 -->
      <view class="block">
        <view class="block-title">
          会员管理
        </view>
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in huiyuanList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
      <!-- 营销推广 -->
      <view class="block">
        <view class="block-title">
          营销推广
        </view>
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in yingxiaoList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
      <!-- 其他服务 -->
      <view class="block">
        <view class="block-title">
          其他服务
        </view>
        <view class="block-warpper">
          <view class="block-warpper-item" v-for="(item, index) in qitaList" :key="index">
            <image class="block-warpper-item-icon" :src="item.url" mode=""></image>
            <view class="block-warpper-item-label">
              {{item.label}}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        bgColor: "transparent",
        settingList: [{
            url: "/static/images/a1.png",
            label: "收款码"
          },
          {
            url: "/static/images/a2.png",
            label: "团购核销"
          },
          {
            url: "/static/images/a3.png",
            label: "我的团购"
          },
          {
            url: "/static/images/a4.png",
            label: "生意报表"
          }
        ],
        changyongList: [{
            url: "/static/images/changyong1.png",
            label: "扫码收款"
          },
          {
            url: "/static/images/changyong2.png",
            label: "收款码"
          },
          {
            url: "/static/images/changyong3.png",
            label: "语音设备"
          },
          {
            url: "/static/images/changyong4.png",
            label: "到账记录"
          },
          {
            url: "/static/images/changyong5.png",
            label: "团购核销"
          },
          {
            url: "/static/images/changyong6.png",
            label: "退款管理"
          }
        ],
        dianpuList: [{
            url: "/static/images/dianpu1.png",
            label: "收款账户"
          },
          {
            url: "/static/images/dianpu2.png",
            label: "员工管理"
          },
          {
            url: "/static/images/dianpu3.png",
            label: "店铺资料"
          },
          {
            url: "/static/images/dianpu4.png",
            label: "地推商务"
          },
        ],
        huiyuanList: [{
            url: "/static/images/huiyuan1.png",
            label: "会员画像"
          },
          {
            url: "/static/images/huiyuan2.png",
            label: "会员充值"
          },
          {
            url: "/static/images/huiyuan3.png",
            label: "充值管理"
          },
          {
            url: "/static/images/huiyuan4.png",
            label: "充值活动"
          },
          {
            url: "/static/images/huiyuan5.png",
            label: "会员营销"
          },
        ],
        yingxiaoList: [{
          url: "/static/images/yingxiao.png",
          label: "支付有礼"
        }, ],
        qitaList: [{
            url: "/static/images/qita1.png",
            label: "在线客服"
          },
          {
            url: "/static/images/qita2.png",
            label: "支付有礼"
          }
        ]
      }
    },
    onPageScroll(e) {
      const scrollTop = e.scrollTop;
      console.log("scrollTop", scrollTop);
      const threshold = 100;
      if (scrollTop > threshold) {
        this.bgColor = '#FE573F'
      } else {
        this.bgColor = 'transparent'
      }
    },
    methods: {
      toPage(item) {
        switch (item.label) {
          case "收款码":
            uni.navigateTo({
              url: "/pages/mine/payCode"
            })
            break;
          case "生意报表":
            uni.navigateTo({
              url: "/pages/mine/businessReport"
            })
            break;
          default:
            break;
        }
      },
      toReport() {
        uni.navigateTo({
          url: "/pages/mine/businessReport"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .block {
    box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(234, 117, 40, 0.1);
    border-radius: 30rpx;
    background: #fff;
    margin-top: 30rpx;

    .block-title {
      font-weight: bold;
      font-size: 28rpx;
      color: #000000;
      padding: 30rpx;
      box-sizing: border-box;
    }

    .block-warpper {
      display: flex;
      flex-wrap: wrap;

      .block-warpper-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 40rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;

        .block-warpper-item-icon {
          width: 52rpx;
          height: 52rpx;
        }

        .block-warpper-item-label {
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
          margin-top: 16rpx;
        }
      }
    }
  }

  .blance {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;

    .blance-item {
      width: 330rpx;
      height: 242rpx;
      background: #FFFFFF;
      border-radius: 30rpx;
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .linener {
        display: flex;
        align-items: center;

        .linener_apliay_icon {
          margin-right: 14rpx;
          width: 48rpx;
          height: 48rpx;
        }

        .linener_amount {
          font-weight: bold;
          font-size: 28rpx;
          color: #333333;
        }
      }

      .tp {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tp-fl {
          font-weight: bold;
          font-size: 24rpx;
          color: #333333;
        }

        .tp-icon {
          width: 32rpx;
          height: 32rpx;
        }
      }

      .amount {
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
      }

      .count-label {
        font-weight: 400;
        font-size: 18rpx;
        color: #666666;
      }

      .count-value {
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }

  .setting {
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    box-sizing: border-box;
    margin-top: 50rpx;

    .setting-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .setting-item-icon {
        width: 60rpx;
        height: 60rpx;
      }

      .setting-item-label {
        font-weight: 400;
        font-size: 24rpx;
        color: #FFFFFF;
        margin-top: 16rpx;
      }
    }
  }

  .container {
    position: relative;

    .bgColor {
      width: 100vw;
      height: 884rpx;
      position: absolute;
      top: 0;
      left: 0;
      background: linear-gradient(180deg, #FF3C21 0%, rgba(234, 214, 34, 0) 100%);
    }

    .uv-nav-slot {
      display: flex;
      align-items: center;

      .touxiang {
        width: 72rpx;
        height: 72rpx;
        border: 2rpx solid #fff;
        border-radius: 50%;
        margin-right: 15rpx;
      }

      .linner {
        .linner-title {
          font-weight: bold;
          font-size: 28rpx;
          color: #FFFFFF;
        }

        .changeShop {
          width: 100rpx;
          height: 32rpx;
          border-radius: 8rpx;
          border: 1rpx solid #FFFFFF;
          font-weight: 400;
          font-size: 20rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 32rpx;
        }
      }
    }
  }
</style>